/* CSS Document */

/* GLOBAL */

* {
	/* Turns off default padding and margins on ALL elements, including paragraphs (p) and headers (H1, H2, H3, etc.) */
	margin: 0;
	padding: 0;
	}
	
a, a:hover { 
	/* Turns off the automatically-generated line beneath every link.  To turn it back on, you will need to use the style "text-decoration: underline" or you can create a custom line using the "border-bottom" style */
	text-decoration: none;
	}

body {
	/* Styles the template's background colors and default fonts. */
	/* NOTE: "font-size" is set to 62.5% in order to change the default font from 16 pixels to 10 pixels (10 is 62.5% of 16).  In all of the secondary style sheets, you'll notice that font-size is determined by ems. So, for example, the main content is often displayed at 1.1em, which translates to 11 pixels (the default size, 10, multiplied by 1.1).  We use ems for a variety of reasons, the most important of which is that it allows font sizes to be customized by the user in Internet Explorer, thereby improving overall web accessibility */
	text-align: center;
	/* background: #666666 url(http://ef.engr.utk.edu/c/sys/06/templates/images/main-back.gif) repeat-x top; */
	background: #ffffff;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 62.5%;
	color: #333333;
	}
	
.skip {
	/* There is a "skip to main content" link in the template header that does not display in standard browsers. It is included for the benefit of seeing-impaired users who browse with text-reading devices */
	display: none;
	}

	
	
	
	
/* HEADER */
#header-outer {
	background: #d5d5bf url(http://ef.engr.utk.edu/c/sys/06/templates/images/orange-header-outer.png);
;
	}
	
#header-inner {
	/* Establishes the width of the header and styles it */
	width: 960px;
	margin: 0 auto;
	text-align: center;
	background: url(http://ef.engr.utk.edu/c/sys/06/templates/images/header-inner-back.gif) no-repeat center top;
	}
#header-inner h2 {
	/* The template includes several headings (H2s) that do not display in standard browsers.  They improve site accessibility by titling lists of links -- for example, the list of Frequently Used Tools in the header. NOTE: This expalins why there is not a standard H2 style.  Rather, H2 is styled for different purposes in different divs */
	display: none;
	}
#header-left {
	/* The UT wordmark is the only thing that lives in header-left. */
	width: 240px;
	float: left;
	display: inline;
	}
.logo {
	/* In order to improve web accessibility, the header includes a simple text link to utk.edu (in addition to the clickable UTK wordmark).  This style prevents it from displaying in standard web browsers */
	display: none;
	}
#header-right {
	/* Everything to the right of the UT wordmark lives in header-right, beginning with the large, wide header image (header-title.jpg). */
	width: 720px;
	float: right;
	display: inline;
	}	
.hide-search {
	/* Another hidden label included to improve web accessibility */
	display: none;
	}
	
.hide-screen {
	display: none;
	}

.hide-print {
	}

	
/* DEPARTMENT -- This is the horizontal orange bar where college, department, and unit links live. */

#department-outer {
	/* Extends the orange bar across the full width of the browser */
	background:  #ffa448 center;
	}
#department-inner {
	/* Establishes the width of the Department area and styles it */
	width: 960px;
	margin: 0 auto;
	text-align: center;
	background-color: #f77f00;
	}
#department-left {
	/* department-left is the dark orange link directly beneath the UT wordmark.  PLEASE NOTE that the background color is controlled by the link styles (department-left a, a:hover), so if you do not make the word in that department-left a hyperlink, the colors will not display properly.  When creating your navigation, make this the link to YOUR homepage. */
	width: 180px;
	float: left;
	display: inline;
	text-align: left;
	}
#department-left h2 {
	/* Styles the name of the department, college, or unit */
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 1.2em;
	line-height: 2.27em;
	font-weight: lighter;
	}
#department-left a {
	/* Styles the name of the department, college, or unit */
	display: block;
	width: 148px;
	padding: 0px 15px;
	background: #0059c6;
	border-right: 1px solid #b25000;
	border-left: 1px solid #b25000;
	color: #FFFFFF;
	}
#department-left a:hover {	
	/* Styles the name of the department, college, or unit */
	display: block;
	width: 148px;
	padding: 0px 15px;
	background: #777777;
	border-right: 1px solid #6b6b6b;
	border-left: 1px solid #6b6b6b;
	color: #FFFFFF;
	}
#department-right {
	/* department-right is where you can create "breadcrumb navigation."  For example, if the page lists the Ceramics faculty, department-right might include: School of Art > Ceramics > Faculty. This gives users a better sense of how deeply they have dug themselves into a site.  You might also use department-right to feature important or frequently-used links */
	float: right;
	display: inline;
	background: #f77f00;
	padding-right: 10px;
	width: 750px;
	color: #ffffff;
	text-align: left;
	line-height: 2.27em;
	font-size: 1.2em;
	}
#department-right a {
	/* Styles the links */
	color: #ffffff;
	border-bottom: 1px solid #faac59;
	padding-bottom: 1px;
	}
#department-right a:hover {
	color: #ffffff;
	border-bottom: 1px solid #c65900;
	padding-bottom: 1px;
	}
	
	



/* CONTENT */

#content-outer {
	/* Establishes the width of the Content area and styles it */
	background:  #ffffff center;
	}
#content-inner {
	background-color: #ffffff;
	width: 960px;
	margin: 0 auto;
	text-align: center;
	/* overflow: auto; */
	}	

	
#left-menu {
	/* Creates the Left Menu column */
	float: left;
	display: inline;
	}
#left-menu ul {
	list-style-type: none;
	}

	
	/* MAIN CONTENT AREA */
	
#main-content {
	/* main-content is everything to the right of the left menu. In all of the standard template designs, it is 720 pixels wide. */
	/* main-content can be used as a single, large content area or it can be sub-divided in two ways:
		 Two columns: main-twocol, main-right
		 Three columns: main-left, main-middle, main-right */
	float: right;
	display: inline;
	text-align: left;
	/* overflow: auto; */
	}
	
		/* COLUMN THAT MERGES MAIN LEFT AND MIDDLE COLUMNS */
		
#main-twocol {
	float: left;
	display: inline;
	}
	
		/* LEFT COLUMN */
	
#main-left {
	float: left;
	display: inline;
	}
	
		/* MIDDLE COLUMN */
	
#main-middle {
	float: left;
	display: inline;
	}
	
		/* RIGHT COLUMN */
		
#main-right {
	float: right;
	display: inline;
	}

	



/* FOOTER */

#footer-orange-outer {
	/* Extends the orange line across the full width of the browser */
	background-color:  #f77f00;
	width: 100%;
	}
#footer-orange-inner {
	/* Establishes the width of the orange line and styles it */
	width: 960px;
	background-color:  #f77f00;
	margin: 0 auto;
	text-align: center;
	height: 3px;
	}
#footer-grey-outer {
	/* Extends the grey background across the full width of the browser */
	background-color: #666666;
	width: 100%;
	}
#footer-grey-inner {
	/* Establishes the width of the grey footer and styles it */
	width: 930px;
	margin: 0 auto;
	color: #dddddd;
	line-height: 18px;
	font-size: 1.1em;
	text-align: left;
	padding: 15px 15px 15px 15px;
	}
#footer-grey-inner h2 {
	/* The template includes several headings (H2s) that do not display in standard browsers.  They improve site accessibility by titling lists of links -- for example, the list of Frequently Used Tools in the header. NOTE: This expalins why there is not a standard H2 style.  Rather, H2 is styled for different purposes in different divs */
	display: none;
	}
#footer-grey-inner ul li {
	/* Turns off the bullets that are typically found in an unordered list and displays the list horizontally rather than vertically (the default) */
	list-style: none;
	display: inline;
	margin-right: 10px;
	}
#footer-grey-inner a {
	/* Styles the links in the footer */
	color: #dddddd;
	border-bottom: 1px solid #999999;
	padding-bottom: 2px;
	}
#footer-grey-inner a:hover {
	color: #ffffff;
	border-bottom: 1px solid #f77f00;
	padding-bottom: 2px;
	}
	
	
	
.border-photo {
	/* Adds a shaded margin and border */
	background-color: #f8f8ee;
	padding: 3px;
	border: 1px solid #d5d5bf;
	}
.right-float-photo {
	/* Adds the shaded margin and border, and also floats the image to the right with a bit of padding so that text does not butt up directly beside it */
	background-color: #f8f8ee;
	padding: 3px;
	border: 1px solid #d5d5bf;
	float: right;
	margin: 0px 0px 15px 15px;
	}
.left-float-photo {
	/* Adds the shaded margin and border, and also floats the image to the left with a bit of padding so that text does not butt up directly beside it */
	background-color: #f8f8ee;
	padding: 3px;
	border: 1px solid #d5d5bf;
	float: left;
	margin: 0px 15px 15px 0px;
	}
	
	
/* MAIN CONTENT AREA */

#content-outer {
	/* Establishes the width of the Content area and styles it */
	/* different-content-outer.gif is a background image that is being repeated horizontally.  It creates the dark-to-light blue gradient */
	background:  #ffffff url(http://ef.engr.utk.edu/c/sys/06/templates/images/orange-content-outer.png) repeat-x center top;
	}
	
#main-content {
	/* Establishes the width of the main content area.  The div is 680 pixels wide because there is 20 pixels of padding on the right and left (20 + 680 + 20 = 720).  I didn't specify the left padding because the div is floating to the right (see global.css) */
	padding: 1em 20px 3em 0px;
	width: 740px;
	font-size: 1.2em;
	}
#main-content p {
	/* Styles everything within p tags <p> . . . </p> */
	font-size: 1.1em;
	line-height: 1.5em; /* was 1.636 */
	margin: 1.5em 0; /* was 1.636 */
	}

h1 {
	/* Styles the main heading.  NOTE: Each page should have only one H1 */
	color: #bf4d02;
	font-family: "trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	font-size: 1.6em;
	line-height: .9em;
	/*border-bottom: 1px solid #aaaaaa;*/
	margin: .5em 0em .5em 0em;
	font-weight: lighter;
	}

#main-content h2 {
	/* Styles all Heading 2s in the main content area. Use H2 for the main subheads in your content */
	font-size: 1.4em;
	line-height: 1.2em;
	margin: 1.2em 0em 0.4em 0em;
	color: #4c617e;
	/*font-weight: lighter;*/ 
	}
#main-content h3 {
	/* Styles all Heading 3s in the main content area. Use H3 for the sub-subheads in your content. For example, use H3 to title a small ordered list that is found under a main subhead (H2) */
	font-size: 1.2em;
	line-height: 1.2em;
	margin: 1.2em 0em 0.4em 0em;
	color: #222287;
	}
#main-content h4 {
	font-size: 1.05em;
	line-height: 1.2em;
	margin: 1.2em 0em 0.4em 0em;
	color: #707ac7;
	}
#main-content a {
	/* Styles all links in the main content area. */
	color: #4c617e;
	text-decoration: underline;
	}
#main-content a:hover {
	color: #bf4d02;
	}
#main-content ul {
	/* Styles all unordered lists in the main content area */
	list-style-type: square;
	padding-left: 1em;
	margin-left: 1em;
	}
#main-content ul li {
	font-size: inherit;
	line-height: 1.333em;
	}
#main-content ol {
	/* Styles all ordered lists in the main content area */
	list-style-type: decimal;
	padding-left: 2em;
	margin-left: 1em;
	}
#main-content ol li {
	font-size: inherit;
	line-height: 1.333em;
	}


	/* LEFT MENU */
	
#left-menu {
	/* left-menu styles the main menu column, including the font size. NOTE: The padding- and margin-bottoms are a trick that extends the left menu the full length of the page (assuming the page isn't longer than 30,000 pixels) regardless of the length of the main content area  */
	width: 180px;
	text-align: left;
	font-size: 1.1em;
	}
#left-menu h2 {
	/* The template includes several headings (H2s) that do not display in standard browsers.  They improve site accessibility by titling lists of links -- for example, the list of Frequently Used Tools in the header. NOTE: This expalins why there is not a standard H2 style.  Rather, H2 is styled for different purposes in different divs */
	display: none;
	}
#left-menu ul li a {
	/* Styles the Major Link Buttons.  NOTE: This is where you would adjust the STATIC color of the MAJOR Link button.  To do so, simply change the hexadecimal value of "background-color" */
	list-style: none;
	color: #ffffff;
	display: block;
	width: 150px;
	background-color: #4c617e;
	padding: .5em 15px;
	border-bottom: #8aa4c9 1px solid;
	}
#left-menu ul li a:hover {
	/* Styles the Major Link Buttons.  NOTE: This is where you would adjust the HOVER color of the MAJOR Link button.  To do so, simply change the hexadecimal value of "background-color" */
	list-style: none;
	color: #376482;
	display: block;
	width: 150px;
	background-color: #e8eef5;
	}
#left-menu ul li ul li a {
	/* Styles the Major Link Buttons.  NOTE: This is where you would adjust the STATIC color of the MINOR Link button.  To do so, simply change the hexadecimal value of "background-color" */
	list-style: none;
	color: #ffffff;
	display: block;
	width: 150px;
	background-color: #8aa4c9;
	border-bottom: #37475d 1px solid;
	}
#left-menu ul li ul li a:hover {
	/* Styles the Major Link Buttons.  NOTE: This is where you would adjust the HOVER color of the MINOR Link button.  To do so, simply change the hexadecimal value of "background-color" */
	list-style: none;
	color: #376482;
	display: block;
	width: 150px;
	background-color: #e8eef5;
	}

	
	/* COLUMN THAT MERGES MAIN LEFT AND MIDDLE COLUMNS */
	
#main-twocol {
	/* Establishes the width of main-twocol */
	width: 509px;
	padding-right: 20px;
	border-right: 1px dotted #999999;
	}
	

	/* MAIN LEFT COLUMN */
	
#main-left {
	/* Establishes the width of main-left */
	text-align: left;
	width: 254px;
	}
	
	
	/* MAIN MIDDLE COLUMN */
	
#main-middle {
	/* Establishes the width of main-middle and creates the dotted border that separates it from the main-right column */
	text-align: left;
	width: 254px;
	padding-left: 20px;
	}
	
	
	/* MAIN RIGHT COLUMN */
	
#main-right {
	/* Establishes the width of main-right */
	text-align: left;
	width: 200px;
	}
	
/* EF */


.content {background-color:#ffffff; border-color:#FF6600;}
.redcell {background-color:#ffffff; border-color:#FF0000;}

div.ghost {display: none;}

input.bigbut { width: 1.2em; height: 1.2em; }
.nobull {list-style-type: none}


.fixedfont {
	font-family: "courier new", monospace;
}

input.small, select.small {
	font-family: arial,sans-serif;
	font-size: 75%;
}

textarea.small {
	font-family: "courier new", monospace;
	font-size: 75%;
}
.td1 { text-align: right; width: 20px; font-size: 8pt; }
.tr1 { text-align: right; font-size: 8pt; }
.tr1a { text-align: left; font-size: 8pt; }
.blue { color: #0000ff; }
.red { color: #ff0000; }
.sm { font-size: 90%;}
.vsm { font-size: 80%;}
.big { font-size: 110%;}
.vbig { font-size: 120%;}
.line1 { background-color: #bbffbb; }
.line2 { background-color: #eeffee; }
.nobreak { white-space: nowrap; }

#ef-announcements ul {
	list-style-image: url("/img/ebc.gif");;
	list-style-type: none;
	}
	
#ef-announcements ul ul {
	list-style-image: none;
	padding-left: 1em;
	margin-left: 1em;
	}

.ef-announcement-title {
	font-weight: bold;
	font-size: 1.2em;
	padding-bottom: .25em;
	margin-bottom: .25em;
	}

.ef-announcement-common {
	padding-top: 1em;
	padding-bottom: .5em;
	font-weight: bold;
	font-style: italic;
	}

.ef-announcement-date {
	font-size: .8em;
	font-style: italic;
	}
 
td,th {padding: 0.25em; }
table {border-spacing: 0.05em; border-color: lightblue; }

/* toolbox menu from: http://csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/ */
#utnav{
	list-style:none;
	font-weight:bold;
	margin-bottom:1px;
	/* Clear floats */
	float:left;
	width:100%;
	/* Bring the utnav above everything else--uncomment if needed.
	position:relative;
	z-index:5;
	*/
}
#utnav li{
	float:left;
	margin-top:2px;
	margin-left:4px;
	margin-right:4px;
	position:relative;
}
#utnav a{
	display:block;
	padding:4px;
	color:#fff;
	background:#444;
	text-decoration:none;
}
#utnav a:hover{
	color:#fff;
	background:#f77f00;
	text-decoration:underline;
}

/*--- DROPDOWN ---*/
#utnav ul{
	background:#fff; /* Adding a background makes the dropdown work properly in IE7+. Make this as close to your page's background as possible (i.e. white page == white background). */
	background:rgba(255,255,255,0); /* But! Let's make the background fully transparent where we can, we don't actually want to see it if we can help it... */
	background:#000;
	list-style:none;
	position:absolute;
	left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
}
#utnav ul li{
	padding-top:1px; /* Introducing a padding between the li and the a give the illusion spaced items */
	float:none;
}
#utnav ul a{
	white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */
}
#utnav li:hover ul{ /* Display the dropdown on hover */
	left:0; /* Bring back on-screen when needed */
	padding-bottom:2px;
}
#utnav li:hover a{ /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
	background:#f77f00;
	text-decoration:underline;
}
#utnav li:hover ul a{ /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
	background:#444;
	text-decoration:none;
}
#utnav li:hover ul li a:hover{ /* Here we define the most explicit hover states--what happens when you hover each individual link. */
	background:#f77f00;
}

/* end toolbox */
.search {
	display: inline;
	margin: 15px auto 0 auto;
	z-index: 60;
}
.search input {
	min-height: 18px;
}
.search input.searchfield {
	padding: 0 3px 0 3px;
	margin-top: 2px;
	background: #fff;
	font-size: 11px;
	text-align: left; 
	font-weight: bold;
	margin-right: 1%;
	-webkit-border-radius: 4px;
	   -moz-border-radius: 4px;
		    border-radius: 4px;
}
.search input.searchsubmit {
	margin-top: 2px;
}

#nav, #nav ul{
margin:0;
padding:0;
list-style-type:none;
list-style-position:outside;
position:relative;
line-height:1.5em; 
}

#nav a{
display:block;
padding:0px 5px;
border:1px solid #333;
color:#fff;
text-decoration:none;
background-color:#333;
}

#nav a:hover{
background-color:#fff;
color:#333;
}

#nav li{
float:left;
position:relative;
}

#nav ul {
position:absolute;
display:none;
width:12em;
top:1.5em;
}

#nav li ul a{
width:12em;
height:auto;
float:left;
}

#nav ul ul{
top:auto;
}	

#nav li ul ul {
left:12em;
margin:0px 0 0 10px;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
display:none;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{
display:block;
}